<template>
  <div>
    <div class="mybox">
      <div class="location">
        <span @click="cts">{{mycts}}</span>
        <i class="city-entry-arrow"></i>
      </div>
      <div class="box2">
        <van-tabs v-model="active" ref="tabs">
          <van-tab title="热映"
            ><xuan-ka pin :pm="pm" :rm="rm"></xuan-ka
          ></van-tab>
          <van-tab title="影院"><xuan-ka2></xuan-ka2></van-tab>
          <van-tab title="待映"><xuan-ka3></xuan-ka3></van-tab>
          <van-tab title="经典电影"><xuan-ka1></xuan-ka1></van-tab>
        </van-tabs>
      </div>
      <div class="ss">
        <img @click="souSuo"
          src="https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/component/index/img/base64/search-red.png"
          alt=""
        />
      </div>
    </div>
    <div class="mykong"></div>
    <!-- <div>1</div> -->
  </div>
</template>
<script>
import {mapState} from"vuex";
import xuanKa from "../haoPin";
import xuanKa1 from "./xuanXiangka/01.vue";
import xuanKa2 from "./xuanXiangka/02.vue";
import xuanKa3 from "./xuanXiangka/03.vue";

export default {
  data() {
    return {
      active: 0,
    };
  },
  computed:{
    ...mapState(["mycts","myctsid"])
  },
  methods:{
    souSuo(){
      this.$router.push("/mySouSuo")
    },
     cts(){
      this.$router.push("/cts")
    }
  },
  components: {
    xuanKa,
    xuanKa1,
    xuanKa2,
    xuanKa3,
  },
  props: {
    pm: {
      typeof: Array,
    },
    rm: {
      typeof: Array,
    },
  },
  created() {
    console.log(this.rm);
    this.$nextTick(() => {
      // console.log(this.$refs);
      // console.log(this.$refs.tabs.$el);
      // console.log(window.innerWidth);
      this.$refs.tabs.$el.style.width = window.innerWidth - 110 + "px";
    });
  },
  // mounted(){
  //   this.$nextTick(()=>{
  //     // console.log(this.$refs.gz1.clientWidth);
  //     // console.log(window.innerWidth);
  //     // console.log(this.$refs);
  //      this.$refs.tabs.$el.style.width = window.innerWidth - 100 + "px";
  //   })
  // }
};
</script>
<style lang="less" >
.mykong {
  height: 150px;
  width: 100%;
  // background-color: red;
}
.mybox {
  width: 100%;
  box-sizing: border-box;
  border-top: 0.02rem solid #e6e6e6;
  border-bottom: 0.02rem solid #e6e6e6;
  height: 50px;
  display: flex;
  justify-content: space-around;
  // float: left;
  // justify-content: center;
  .location {
    font-size: 15px;
    width: 50px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    padding-left: 10px;
    .city-entry-arrow {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: url("../../assets/images/arrow.png");
      background-size: 100%;
    }
  }
  .ss {
    width: 50px;
    padding-top: 2px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    img {
      width: 20px;
      height: 20px;
    }
  }

  .box2 {
    //  width: 200px;
    .van-tabs__nav--line {
      width: 100%;
    }
    .van-tabs__wrap {
      // width: 70%;
    }
    .van-tab {
      // box-sizing: border-box;
      // width: 20%;
    }
    .van-tabs {
      .van-tabs__content {
        // box-sizing: border-box;
        padding: 10px 10px 10px 10px;

        .van-tab__pane {
          box-sizing: border-box;
          margin-left: -60px;
          width: 350px;
        }
      }
    }
  }
}
</style>